<template>
	<div class="toDnav">
<div class="tian">填写订单</div>
<div class="bot">
	<div class="centers">
		<p>北京环球度假区 - 年卡-悠享</p>
		<img :src="img" alt="">
		<span>365天有效</span>
	</div>
</div>
<div class="last">
	<div class="mai">
	<div class="top">
			<div class="piao">
				<span>老人票</span>
				<span>¥1265</span>
			</div>
			<div class="piao2">
				<span>条件退</span>
				<span>|</span>
				<span>无需换票</span>
			</div>
			<div class="xu">预订须知 &nbsp;></div>
			<van-stepper v-model="value" />
	</div>
		<div class="duo">
			
<van-collapse v-model="activeName" accordion>
	<van-collapse-item title="更多票种" name="1">
	<div class="top">
		<div class="piao">
			<span>成人票</span>
			<span>¥1688</span>
		</div>
		<div class="piao2">
			<span>条件退</span>
			<span>|</span>
			<span>无需换票</span>
		</div>
		<div class="xu">预订须知 &nbsp;></div>
		<van-stepper v-model="value" />
	</div>
		<div class="top">
			<div class="piao">
				<span>儿童票</span>
				<span>¥1265</span>
			</div>
			<div class="piao2">
				<span>条件退</span>
				<span>|</span>
				<span>无需换票</span>
			</div>
			<div class="xu">预订须知 &nbsp;></div>
			<van-stepper v-model="value" />
		</div>
	</van-collapse-item>

</van-collapse>
		</div>
	</div>
	
</div>
	</div>
</template>

<script>
export default {
	data() { 
		return {
			value: 1,
			activeName: ['1'],
			obj: {},
			img:"https://gw.alicdn.com/imgextra/i1/O1CN01nAeTfP1K3xth6kwqx_!!6000000001109-2-tps-52-56.png",
		}
	},
	mounted() {
		if (this.$route.query.detailcent) { 
			this.obj = JSON.parse(this.$route.query.detailcent)
			console.log(this.obj);
		}
	}
	}
</script>

<style scoped>
.toDnav{
	height: 5.2rem;
box-sizing: border-box;
}
.tian{
	height: .72rem;
background: linear-gradient(to right, rgb(255, 225, 77), rgb(255, 225, 77));
	font-size: 18px;
	text-align: center;
	line-height: .65rem;
	box-sizing: border-box;
}
.bot{
		background: linear-gradient(to right, rgb(255, 225, 77), rgb(255, 225, 77));
		box-sizing: border-box;
		height: 1.9rem;
}
.centers{
	width: 7.2rem;
	height: 1.7rem;
	background-color: white;
	margin-left: .15rem;
	border-radius: .15rem;
	overflow: hidden;
	box-sizing: border-box;
	
}
.centers img{
	width: .26rem;
	height: .26rem;
	margin-top: .4rem;
	margin-left: .3rem;
}
.centers p{
	margin-top: .3rem;
	font-size: 20px;
	margin-left: .3rem;
	font-weight: 700;
}
.centers span{
	display: block;
	font-size: 14px;
	margin-top: -.3rem;
	margin-left: .7rem;
	color: #292c33;
}
.last{
		height: 1.7rem;
background: linear-gradient(to bottom, rgb(255, 225, 77),
	white);
	box-sizing: border-box;
}
.mai{
	width: 7.2rem;
	height: 2.4rem;
	margin-left: .15rem;
	background-color: white;
		border-radius: .15rem;
		box-sizing: border-box;
}
.piao {
	display: flex;
	justify-content: space-between;
}
.piao :nth-child(1){
	font-size: 18px;
	margin-top: .3rem;
	margin-left: .2rem;
}
.piao :nth-child(2) {
	color: red;
	margin-right: .2rem;
	margin-top: .3rem;
	font-size: 16px;
}
.piao2{
	margin-top: .1rem;
	margin-left: .2rem;
}
.piao2  :nth-child(1){
			color: rgb(0, 191, 96);
			margin-right: .1rem;
}
.piao2  :nth-child(2){
			margin-right: .1rem;
}
.piao2  :nth-child(3){
			color: rgb(145, 148, 153);
}
.xu{
	margin-top: .1rem;
		margin-left: .2rem;
		color: rgb(145, 148, 153);
}
.duo{
	height: .64rem;
		margin-top: .1rem;
			margin-left: .2rem;
			margin-right: .2rem;
			color: rgb(145, 148, 153);
			text-align: center;
			padding-top: .2rem;
	box-sizing: border-box;
}
.top{
	height: 1.28rem;
}
.van-stepper{
	position: relative;
	top: -0.6rem;
	left: 5.15rem;
}
::v-deep .van-cell{
	position: relative;
	top: 0.2rem;
	width: 7.2rem;
	height: .64rem;
	margin-left: -0.2rem;
border-radius: .15rem;
border-top: 1px solid rgba(145, 148, 153, 0.228);
}
</style>